<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../assets/css/basic.css" />
		<link rel="stylesheet" type="text/css" href="../../assets/css/demo.css" />
		<link rel="stylesheet" type="text/css" href="../../assets/css/admin.css" />
		<link rel="stylesheet" type="text/css" href="../../assets/css/hmstyle.css" />
		<style lang="scss" scoped>
			#box {
				position: relative;
				width: 100%;
				height: 455px;
				background: #fff;
				border-radius: 5px;
			}
			
			#box .list {
				position: relative;
				height: 455px;
			}
			
			@media only screen and (min-width: 1450px) {
				#box .list li {
					width: 50%;
					height: 50%;
					margin: auto;
					margin-top: 0px;
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
				}
				#box .count {
					position: absolute;
					left: 900px;
					bottom: 5px;
				}
			}
			
			@media screen and (min-width: 800px) and (max-width: 1450px) {
				#box .list li {
					width: 50%;
					height: 50%;
					margin: auto;
					margin-top: 0px;
					position: absolute;
					top: 0;
					left: -100px;
					bottom: 0;
					right: 0;
				}
				#box .list li img {
					width: 120%;
				}
				#box .count {
					position: absolute;
					left: 700px;
					bottom: 5px;
				}
			}
			
			@media screen and (max-width: 400px) {
				#box {
					display: none;
				}
			}
			
			#box .list li.current {
				opacity: 1;
			}
			
			#box .count li {
				color: #fff;
				float: left;
				width: 20px;
				height: 20px;
				line-height: 20px;
				text-align: center;
				cursor: pointer;
				margin-right: 5px;
				overflow: hidden;
				background: #6D6B6A;
				opacity: 0.7;
				border-radius: 20px;
			}
			
			#box .count li.current {
				color: #fff;
				opacity: 0.7;
				font-weight: 700;
				background: #f60;
				transition: all .6s ease;
			}
			/* 设置过渡属性 */
			
			.fade-enter-active,
			.fade-leave-active {
				transition: all 1s;
			}
			
			.fade-enter,
			.fade-leave-to {
				opacity: 0;
			}
		</style>
	</head>

	<body>
		<div class="banner">
			<div data-mr-flexslider="" id="demo-slider-0" class="mr-slider mr-slider-default scoll">
				<div id="box">
					<ul id="imagesUI" class="list">
						<div data-v-c7d0387a="">
							<li style=""><img src="../../assets/images/ad1.png"></li>
							<li style="display: none;"><img src="../../assets/images/ad2.png"></li>
							<li style="display: none;"><img src="../../assets/images/ad3.png"></li>
							<li style="display: none;"><img src="../../assets/images/ad4.png"></li>
						</div>
					</ul>
					<ul id="btnUI" class="count">
						<li class="current"> 1 </li>
						<li class=""> 2 </li>
						<li class=""> 3 </li>
						<li class=""> 4 </li>
					</ul>
				</div>
			</div>
			<div class="clear"></div>
		</div>
	</body>

</html>